<template>
  <div class="container-item-open">
    <img width="260" src="@/assets/images/Gabriel_2.png">
    <div class="group-btn">
      <div class="item-button" @click="createHandler">
        <template v-if="isHistory===null">
          <i class="el-icon-loading" />
          <span>数据获取中...</span>
        </template>
        <template v-else>
          <i class="el-icon-headset" />
          <span>{{ isHistory?'编辑':'创建' }}合辑</span>
        </template>
      </div>
      <div v-if="isHistory" class="item-history">有未完成的编辑, 点击继续编辑</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isHistory: { type: [Boolean, String], default: null }
  },
  methods: {
    async createHandler() {
      this.$emit('create', true);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.container-item-open {
  text-align: center;
  .group-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .item-button {
    padding: 20px 50px;
    position: relative;
    z-index: 2;
    border-radius: 50px;
    font-size: 30px;
    background-color: $bilipink;
    color: #fff;
  }
  .item-history {
    padding: 5px 10px;
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    border: 1px solid;
    border-radius: 0 0 5px 5px;
    font-size: 12px;
    color: $bilipink;
    animation: historyShow 1s forwards;
  }
}

@keyframes historyShow {
  100% {
    transform: translate(-50%, 0);
  }
}
</style>
